{% extends "../layouts/app.html" %}

{% block title %}
  {% if category %}
    {{ category.Name }}
  {% else %}
    话题列表
  {% endif %}
{% endblock %}

{% block content %}

<div class="row mb-5">
  <div class="col-lg-9 col-md-9 topic-list">
    {% if category %}
      <div class="alert alert-info" role="alert">
        {{ category.Name }} ：{{ category.Description }}
      </div>
    {% endif %}

    <div class="card ">

      <div class="card-header bg-transparent">
        <ul class="nav nav-pills JS-nav-link-wrapper">
          <li class="nav-item"><a class="nav-link link-one" href="{{ route_path }}?order=default">最后回复</a></li>
          <li class="nav-item"><a class="nav-link link-two" href="{{ route_path }}?order=recent">最新发布</a></li>
        </ul>
      </div>

      <div class="card-body">
        <!-- 话题列表 -->
        {% include '_topic_list.html' %}
        <!-- 分页 -->
        {% if topics %}
          <div class="mt-5">
            {% include '../shared/_pagination.html' %}
          </div>
        {% endif %}
      </div>
    </div>
  </div>

  <div class="col-lg-3 col-md-3 sidebar">
    {% include '_sidebar.html' %}
  </div>
</div>

{% endblock %}


{% block script %}
<script>
$(function () {
  var is_recent = window.location.href.indexOf('order=recent') !== -1

  $('.JS-nav-link-wrapper')
    .find('.nav-link.link-' + (is_recent ? 'two' : 'one'))
    .addClass('active')
})
</script>
{% endblock %}
